<template>
    <div class="header">
        <div class="avatar">
            <img :src="PUBLIC_URL + '/head-normal.jpg'" alt="" />
        </div>
        <div class="info">
            <span style="font-size: 20rem">{{ studentStore.studentName }}</span>
            <span>学号：{{ studentStore.studentNum }}</span>
            <span>班主任：{{ studentStore.headTeatherName }}</span>
        </div>
    </div>
    <div class="tab">
        <div class="changeinfo">
            <h3>修改信息</h3>
            <span>></span>
        </div>
        <div class="detalis">
            <span>技术支持：申翼特</span>
            <span>联系电话：13662685556</span>
            <span>邮箱：20830862@qq.com</span>
        </div>
    </div>
</template>

<script setup>
import { useStudentStore } from '../../stores/modules/studentStore';
const PUBLIC_URL = import.meta.env.VITE_APP_IMAGE_URL;
const studentStore = useStudentStore();
</script>

<style scoped>
a {
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

.header {
    width: 100vw;
    height: 160rem;
    background-image: linear-gradient(#fdc28b, #ff8615);
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
}

.header .avatar {
    width: 65rem;
    height: 65rem;
}

.header .avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.header .info {
    width: 100%;
    height: 70rem;
    display: flex;
    flex-flow: column;
    justify-content: space-around;
    align-items: center;
    color: #fff;
    font-size: 14rem;
}

.tab {
    width: 100vw;
    height: 600rem;
    display: flex;
    flex-flow: column;
    align-items: center;
}

.tab > div {
    box-shadow: 0rem 2rem 15rem #d6d6d6;
    margin-top: 20rem;
    width: 330rem;
    background-color: #fff;
    border-radius: 10rem;
    display: flex;
    justify-content: space-between;
}

.tab .changeinfo {
    height: 50rem;
}
.tab .changeinfo h3,
.tab .changeinfo span {
    color: #5a5555;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.tab .changeinfo h3 {
    width: 100rem;
    font-size: 16rem;
}
.tab .changeinfo span {
    color: #8e8e8e;
    width: 50rem;
    font-size: 20rem;
}

.tab .detalis {
    height: 150rem;
    flex-flow: column;
    justify-content: space-evenly;
}

.tab .detalis span {
    color: #5a5555;
    padding-left: 20rem;
    width: 100%;
    height: 30rem;
    font-size: 16rem;
}
</style>
